/**
 * Created by lenovo on 2017/5/9.
 * 组件：
 * 1、评论内容组件（头像S，用户名S，评论时间）EvaluateReplyMessage
 */
import React from 'react';
import EvaluateReplyMessage from './evaluateReplyMessage.react';

import zanSUrl from '../img/imgBrandPage/little_zan.png';
import chatSUrl from '../img/imgBrandPage/chat.png'


class EvaluateReply extends React.Component{
    constructor(props){
        super(props);

        this.state = {
            likeReply: '',
            messageReply: ''
        }
    }

    componentDidMount(){
        this.setState({
            likeReply: this.state.likeReply,
            messageReply: this.state.likeReply
        })
    }

    componentWillReceiveProps(nextProps){
        this.setState({
            likeReply: nextProps.likeReply,
            messageReply: nextProps.likeReply
        })
    }
    //全部点赞
    getLikeReply(evaluateReply){
        if(!(evaluateReply.likeReply instanceof Array)){
            //全部点赞
            let likeNum = 0;
            let likeList = [];
            for(let item in evaluateReply.likeReply){
                likeNum++;
            }
            try{
                for(let item in evaluateReply.likeReply){
                    likeList.push(
                        <img className="avatarSizeS zanMargin" key={new Date()+item} src={evaluateReply.likeReply[item].user_avatar} />
                    )
                }
            }catch(e){
                console.log('like reply:'+e);
            }
            return(
                <div className="">
                    {/*点赞模块*/}
                    <div className="zanContainer">
                        <img className="evaluateBtnS" src={zanSUrl} />
                        <div className="zanPicContainer">
                            {likeList}
                            <span className="zanMargin specialItemFont dotDown">...</span>
                        </div>
                        <span className="specialItemFont">赞 {likeNum}</span>
                    </div>
                    <div className="evaluateLine"></div>
                </div>
            )
        }else{
            return (<div className=""></div>);
        }
    }

    //全部回复评论
    getMessageReply(evaluateReply){
        if(evaluateReply.messageReply instanceof Array){
            //全部回复评论
            const everyReplyNum = evaluateReply.messageReply.length;
            const replyList = evaluateReply.messageReply.map(
                (item, index)=>{
                    return(
                        <EvaluateReplyMessage key={new Date()+index} messageReply={item} />
                    );
                }
            );

            return(
                // 回复评论模块
                <div className="replyContainer">
                    <div className="allReplyContainer">
                        <span className="specialItemFont allReplyText">所有回复 {everyReplyNum}</span>
                    </div>
                    <div className="replyDetailsContainer">
                        <div className="replyLeftSide">
                            <img className="evaluateBtnS" src={chatSUrl} />
                        </div>
                        <div className="replyRightSide">
                            {replyList}
                        </div>
                    </div>
                </div>
            )
        }else{
            return (<div className=""></div>);
        }
    }

    render(){
        /*评论回复项*/
        const evaluateReply = this.props.evaluateReply;
        //点赞和回复评论不冲突，综合展示
        if(evaluateReply!==[] && evaluateReply instanceof Array){
            //只有评论没有回复的类型
            const likeList = this.getLikeReply(this.state.evaluateReply);
            const replyCommentList = this.getMessageReply(this.state.evaluateReply);
            return (
                <div className="">
                    {likeList}
                    {replyCommentList}
                </div>
            )
        }else{
            return (<div className=""></div>);
        }

        // return(
        //     <div className="">
        //         <div className="zanContainer">
        //             <img className="evaluateBtnS" src={zanSUrl} />
        //             <div className="zanPicContainer">
        //                 {likeList}
        //                 <span className="zanMargin specialItemFont dotDown">...</span>
        //             </div>
        //             <span className="specialItemFont">赞 {likeNum}</span>
        //         </div>
        //         <div className="evaluateLine"></div>
        //
        //         <div className="replyContainer">
        //             <div className="allReplyContainer">
        //                 <span className="specialItemFont allReplyText">所有回复 {everyReplyNum}</span>
        //             </div>
        //             <div className="replyDetailsContainer">
        //                 <div className="replyLeftSide">
        //                     <img className="evaluateBtnS" src={chatSUrl} />
        //                 </div>
        //                 <div className="replyRightSide">
        //                     {replyList}
        //                 </div>
        //             </div>
        //         </div>
        //     </div>
        // )
    }
}

export default EvaluateReply;